<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 公海 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-row :gutter="10">
      <el-col :span="5" class="container" :style="{height:'calc(100vh - 150px)',overflowY:'auto'}" v-loading="listLoad">
        <el-row :gutter="10" class="hai-left" v-for="(item,i) in listArr" :key='item.hsId'>
          <el-col :span="19" @click.native="haiListClick(item.hsId)" :class="activeIndexId == item.hsId?'active':''">
            {{item.hsName}}
          </el-col>
          <el-col :span="5">
            <el-button v-if="threeLevelsbool.editHai" type="text" icon="el-icon-edit" @click="editHaiBtn(item.hsId,item.hsName)"></el-button>
            <el-button v-if="threeLevelsbool.removeHai" type="text" icon="el-icon-delete" @click="removeHaiBtn(item.hsId,item.hsName)"></el-button>
          </el-col>
        </el-row>
        <div style="text-align:center;">
          <el-button v-if="threeLevelsbool.addHai" icon="el-icon-plus" type="text" @click="addHaiBtn">添加公海</el-button>
        </div>
      </el-col>
      <el-col :span="19" :style="{height:'calc(100vh - 150px)',overflowY:'auto'}">
        <div class="container" :key="activeIndexId">
          <el-tabs v-model="activeName">
            <el-tab-pane label="公海数据列表" name="lists">
              <hai-list :key="activeName" :listArr="listArr" :threeLevelsbool="threeLevelsbool" :activeIndexId='activeIndexId'></hai-list>
            </el-tab-pane>
            <el-tab-pane label="公海设置" name="set" v-if="threeLevelsbool.haiSet">
              <hai-set :activeIndexId='activeIndexId' :threeLevelsbool="threeLevelsbool"></hai-set>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>

    <!-- 新建公海弹窗 -->
    <el-dialog title="公海名称" :visible.sync="addEditHaiObj.haiNameDialogFlg" width="30%" :close-on-click-modal="false">
      <el-form label-width="80px" v-loading="addEditHaiObj.haiNameDialogLoad">
        <el-form-item label="公海名称">
          <el-input v-model="addEditHaiObj.haiName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addEditHaiObj.haiNameDialogFlg = false">取 消</el-button>
        <el-button type="primary" @click="addHaiBtnSub">保存</el-button>
      </span>
    </el-dialog>
    <!-- 删除公海 -->
    <el-dialog title="删除公海" :visible.sync="removeHaiObj.haiNameDialogFlg" width="30%" :close-on-click-modal="false">
      <el-form label-width="0" v-loading="removeHaiObj.haiNameDialogLoad">
        <div style="margin-bottom:15px;"><span style="color:red;">*</span> 请选择将 {{removeHaiObj.haiName}} 的数据转入的公海</div>
        <el-form-item label="">
          <el-radio-group v-model="removeHaiObj.appendId" style="line-height:30px;">
            <template v-for="item in listArr">
              <el-radio :key="item.hsId" v-if='item.hsId != removeHaiObj.removeId' :label="item.hsId">{{item.hsName}}</el-radio>
            </template>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="removeHaiObj.haiNameDialogFlg = false">取 消</el-button>
        <el-button type="primary" @click="removeAppendHaiSub">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { InternationalWatersHaiSubAjax, InternationalWatersHaiListAjax, InternationalWatersHaiEditSubAjax, RolePermissionsQX, InternationalWatersHaiRemoveSubAjax } from '../../../api/index';
import haiList from './InternationalWatersTemplate/list';
import haiSet from './InternationalWatersTemplate/set';

export default {
  data() {
    return {
      listLoad: true,
      listArr: [],
      activeName: "lists",
      activeIndexId: '',
      editId: '',
      // 新建编辑公海
      addEditHaiObj: {
        haiLeftLoad: true,
        haiNameDialogFlg: false,
        haiNameDialogLoad: false,
        haiName: '',
      },
      //删除公海
      removeHaiObj: {
        removeId: '',
        haiName: '',
        appendId: '',
        haiNameDialogFlg: false,
        haiNameDialogLoad: false,
      },

      threeLevelsbool: {
        addHai: false,
        editHai: false,
        removeHai: false,
        addName: false,
        editName: false,
        removeName: false,
        huiHai: false,
        ruExcel: false,
        chuExcel: false,
        haiSet: false,
        haiSetquan: false,
        guowang: false,
        pikehu: false,
        pigonghai: false,
      },
    };
  },
  components: {
    haiList,
    haiSet,
  },
  created() {
    this.getInit();
    this.threeLevels();
  },
  watch: {
    "$route": "getData"
  },
  methods: {
    //初始化公海列表
    getInit() {
      this.listLoad = true;
      InternationalWatersHaiListAjax().then((res) => {
        this.listLoad = false;
        if (res.code === 0) {
          this.listArr = res.seasList;
          if (this.listArr.length > 0) {
            this.haiListClick(res.seasList[0].hsId);
          } else {
            this.haiListClick('');
          }
        } else {
          this.$message(res.msg);
        }
      });
    },
    //新建公海
    addHaiBtn() {
      this.addEditHaiObj.haiNameDialogFlg = true;
      this.addEditHaiObj.haiName = "";
      this.editId = "";
    },
    //编辑公海
    editHaiBtn(id, name) {
      this.addEditHaiObj.haiNameDialogFlg = true;
      this.addEditHaiObj.haiName = name;
      this.editId = id;
    },
    //编辑公海提交
    editHaiBtnSub() {
      InternationalWatersHaiEditSubAjax({ seasId: this.editId, seasName: this.addEditHaiObj.haiName }).then((res) => {
        this.addEditHaiObj.haiNameDialogLoad = false;
        this.addEditHaiObj.haiNameDialogFlg = false;
        if (res.code === 0) {
          this.$message.success("编辑成功");
          this.getInit();
        } else {
          this.$message(res.msg);
        }
      });
    },
    //删除公海
    removeHaiBtn(id, name) {
      this.$confirm('确定要删除该公海吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.removeHaiObj.haiNameDialogFlg = true;
        this.removeHaiObj.removeId = id;
        this.removeHaiObj.haiName = name;
      })
    },
    //删除公海提交
    removeAppendHaiSub() {
      if (this.removeHaiObj.appendId) {
        this.removeHaiObj.haiNameDialogLoad = true;
        InternationalWatersHaiRemoveSubAjax({ deleteId: this.removeHaiObj.removeId, dropId: this.removeHaiObj.appendId }).then((res) => {
          this.removeHaiObj.haiNameDialogLoad = false;
          if (res.code === 0) {
            this.removeHaiObj.haiNameDialogFlg = false;
            this.$message.success("删除成功,数据转移需1-3分钟,请稍后查看");
            this.getInit();
          } else {
            this.$message(res.msg);
          }
        });
      } else {
        this.$message("请选择转入的公海");
      }
    },
    //提交保存公海
    addHaiBtnSub() {
      this.addEditHaiObj.haiNameDialogLoad = true;
      if (this.editId) {
        this.editHaiBtnSub();
      } else {
        InternationalWatersHaiSubAjax({ seasName: this.addEditHaiObj.haiName }).then((res) => {
          this.addEditHaiObj.haiNameDialogLoad = false;
          this.addEditHaiObj.haiNameDialogFlg = false;
          if (res.code === 0) {
            this.$message.success("创建成功");
            this.getInit();
          } else {
            this.$message(res.msg);
          }
        });
      }
    },
    //点击公海
    haiListClick(id) {
      this.activeIndexId = id;
    },
    //三级权限
    threeLevels() {
      let parentRouth = this.$route.path.replace('/', '');
      RolePermissionsQX({ urlName: parentRouth }).then((res) => {
        if (res.code === 0) {
          res.buttons.forEach((item, i) => {
            switch (item.name) {
              case '新建公海':
                this.threeLevelsbool.addHai = item.pageIsShow;
                break;
              case '编辑公海':
                this.threeLevelsbool.editHai = item.pageIsShow;
                break;
              case '删除公海':
                this.threeLevelsbool.removeHai = item.pageIsShow;
                break;
              case '新增客户':
                this.threeLevelsbool.addName = item.pageIsShow;
                break;
              case '编辑客户':
                this.threeLevelsbool.editName = item.pageIsShow;
                break;
              case '删除客户':
                this.threeLevelsbool.removeName = item.pageIsShow;
                break;
              case '捞取/分配':
                this.threeLevelsbool.huiHai = item.pageIsShow;
                break;
              case '导入':
                this.threeLevelsbool.ruExcel = item.pageIsShow;
                break;
              case '导出':
                this.threeLevelsbool.chuExcel = item.pageIsShow;
                break;
              case '公海设置权限':
                this.threeLevelsbool.haiSet = item.pageIsShow;
                break;
              case '设置公海开放权限':
                this.threeLevelsbool.haiSetquan = item.pageIsShow;
                break;
              case '过往导入重复数据':
                this.threeLevelsbool.guowang = item.pageIsShow;
                break;
              case '批量删除客户':
                this.threeLevelsbool.pikehu = item.pageIsShow;
                break;
              case '批量更换公海':
                this.threeLevelsbool.pigonghai = item.pageIsShow;
                break;
            }
          });
        } else {
          this.$message(res.msg);
        }
      });
    }
  }
};
</script>

<style scoped>
.hai-left {
    text-align: center;
    font-size: 14px;
    color: #606266;
    line-height: 32px;
    border-bottom: 1px solid #ebeef5;
    cursor: pointer;
}
.active {
    color: #66b1ff;
}
</style>
